<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="pptTest.css">
<script>
    var index=0;
    function pre(){
        index-=1;
    }
    function next(){
        index+=1;
    }
    function autosideclick(){
        next();
        var img=document.getElementsByTagName("img");
        var dot=document.getElementsByClassName("dot");
        if(index==0)index=3;
        if(index==4)index=1;
        for(var i=0;i<3;i++)
        {
            img[i].style.display="none";
        }
        img[index-1].style.display="block"
        for(var i=0;i<3;i++)
        {
            dot[i].className=dot[i].className.replace(" active","");
        }
        dot[index-1].className+=" active";
        setTimeout(autosideclick,2000);
    }
    function sideclick(){
        var img=document.getElementsByTagName("img");
        var dot=document.getElementsByClassName("dot");
        if(index==0)index=3;
        if(index==4)index=1;
        for(var i=0;i<3;i++)
        {
            img[i].style.display="none";
        }
        img[index-1].style.display="block"
        for(var i=0;i<3;i++)
        {
            dot[i].className=dot[i].className.replace(" active","");
        }
        dot[index-1].className+=" active";
    }
    function dotclick(i){
        index=i;
        sideclick();
    }
</script>
</head>
<body>
<div id="container">
    <div id="pre" onclick="pre();sideclick();"></div>
    <div id="next" onclick="next();sideclick();"></div>
    <div class="number"></div>  
    <img src="10043.jpg" alt="">
    <img src="10131.jpg" alt="">
    <img src="10178.jpg" alt="">
    <div id="dot">
    <div class="dot" onclick="dotclick(1)"></div>
    <div class="dot" onclick="dotclick(2)"></div>
    <div class="dot" onclick="dotclick(3)"></div>
    </div>
</div>
<script>
    autosideclick();
</script>
</body>
</html>